<template>
  <div :class="hideStyle ? '' : 'box_wrap'">
    <div v-if="!hideTitle" class="box_wrap_title">
      中国跆拳道级段位信息
    </div>
    <el-form ref="refTkwChiDan" :model="vo" :size="formSize" label-width="210px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="中国跆协级位">
            <el-select v-if="!isCheck" v-model="vo.ctaBeltLevel" style="width: 100%" class="gl_mr_15" placeholder="请选择级位" filterable @change="onChange">
              <el-option v-for="item in dict.dictCtaBeltLevel" :key="item.code" :label="item.value" :value="item.code" />
            </el-select>
            <span v-else>{{ vo.ctaBeltLevel ? vo.ctaBeltLevel + '级' : '无' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="中国跆协段位">
            <el-select v-if="!isCheck" v-model="vo.ctaBeltDuan" style="width: 100%" class="gl_mr_15" placeholder="请选择段位" filterable @change="onChange">
              <el-option v-for="item in dict.dictCtaBeltDuan" :key="item.code" :label="item.value" :value="item.code" />
            </el-select>
            <span v-else>{{ vo.ctaBeltDuan ? vo.ctaBeltDuan + '段' : '无' }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item
            label="中国跆协级位编号"
            prop="ctaBeltLevelId"
            :rules="!vo.ctaBeltLevel ? [] : formRules.ctaBeltLevelId"
          >
            <el-input v-if="!isCheck" v-model.trim="vo.ctaBeltLevelId" maxlength="20" placeholder="请输入级位编号" type="text" />
            <span v-else>{{ vo.ctaBeltLevelId }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="中国跆协段位编号"
            prop="ctaBeltDuanId"
            :rules="!vo.ctaBeltDuan ? [] : formRules.ctaBeltDuanId"
          >
            <el-input v-if="!isCheck" v-model.trim="vo.ctaBeltDuanId" maxlength="20" placeholder="请输入段位编号" type="text" />
            <span v-else>{{ vo.ctaBeltDuanId }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="gl_clear">
            <div class="gl_fl">
              <el-form-item
                label="上传中国跆协级位照片"
                prop="ctaBeltLevelImageUrl1"
                :rules="!vo.ctaBeltLevel ? [] : formRules.ctaBeltLevelImageUrl1"
              >
                <div style="min-width: 300px" class="gl_clear">
                  <template v-for="(item, index) in imgListLevel">
                    <div :key="index" class="upload_wrap gl_mr_15 gl_mb_15 gl_fl">
                      <upload-file
                        v-if="!isCheck"
                        ref="uploadFile"
                        class="imgt_upload"
                        :file-name="'照片'"
                        :action="action"
                        :show-file-list="false"
                        :limit="1"
                        file-type="image"
                        format-file=".jpg,.jpeg,.png"
                        :default-file-url="getStaticPhotoUrl(item)"
                        @uploadSuccess="photoSavePositive($event, 'imgListLevel', index)"
                      />
                      <img v-if="isCheck" class="show_img" :src="getStaticPhotoUrl(item)">
                      <div v-if="!isCheck" class="imgDelWrap" @click="delImg('imgListLevel', index)">
                        <i class="imgDelete el-icon-delete" />
                      </div>
                    </div>
                  </template>
                  <div v-if="imgListLevel.length < maxImgLen && !isCheck" :style="{height: imgListLevel.length ? '150px' : 'auto'}" class="addImgBtn gl_fl">
                    <el-button type="text" @click="addImgUploader('imgListLevel')">添加照片</el-button>
                  </div>
                </div>
              </el-form-item>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="gl_clear">
            <div class="gl_fl">
              <el-form-item
                label="上传中国跆协段位照片"
                prop="ctaBeltDuanImageUrl1"
                :rules="!vo.ctaBeltDuan ? [] : formRules.ctaBeltDuanImageUrl1"
              >
                <div style="min-width: 300px" class="gl_clear">
                  <template v-for="(item, index) in imgListDun">
                    <div :key="index" class="upload_wrap gl_mr_15 gl_mb_15 gl_fl">
                      <upload-file
                        v-if="!isCheck"
                        ref="uploadFile"
                        class="imgt_upload"
                        :file-name="'照片'"
                        :action="action"
                        :show-file-list="false"
                        :limit="1"
                        file-type="image"
                        format-file=".jpg,.jpeg,.png"
                        :default-file-url="getStaticPhotoUrl(item)"
                        @uploadSuccess="photoSavePositive($event, 'imgListDun', index)"
                      />
                      <img v-if="isCheck" class="show_img" :src="getStaticPhotoUrl(item)">
                      <div v-if="!isCheck" class="imgDelWrap" @click="delImg('imgListDun', index)">
                        <i class="imgDelete el-icon-delete" />
                      </div>
                    </div>
                  </template>
                  <div v-if="imgListDun.length < maxImgLen && !isCheck" :style="{height: imgListDun.length ? '150px' : 'auto'}" class="addImgBtn gl_fl">
                    <el-button type="text" @click="addImgUploader('imgListDun')">添加照片</el-button>
                  </div>
                </div>
              </el-form-item>
            </div>
          </div>
        </el-col>
      </el-row>

    </el-form>
  </div>
</template>

<script>
import uploadFile from './uploadFileDialog';

import { CopyData } from '@/lib';

import { ModTkwChiDanVO } from '@/lib/form/train/enter.js';

export default {
  components: {
    uploadFile
  },
  props: {
    dict: {
      type: Object,
      default() {
        return {};
      }
    },
    // 传入的个人信息数据
    userData: {
      type: Object,
      default() {
        return {};
      }
    },
    isCheck: {
      type: Boolean,
      default: false
    },
    hideStyle: {
      type: Boolean,
      default: false
    },
    hideTitle: {
      type: Boolean,
      default: false
    },
    formSize: {
      type: String,
      default: 'medium'
    }
  },
  data () {
    return {
      action: `${WEB_CONFIG.VUE_APP_STATIC_FILE_RUL}/api/upload/image`, // 图片上传地址
      vo: new ModTkwChiDanVO(),
      maxImgLen: 6,
      imgListLevel: [], // 级位照片存储
      imgListDun: [], // 段位照片存储
      formRules: {
        ctaBeltLevelId: [
          { required: true, message: '请输入级位编号', trigger: 'blur' }
        ],
        ctaBeltDuanId: [
          { required: true, message: '请输入段位编号', trigger: 'blur' }
        ],
        ctaBeltLevelImageUrl1: [
          { required: true, message: '请上传中国跆协级位照片', trigger: 'change' }
        ],
        ctaBeltDuanImageUrl1: [
          { required: true, message: '请上传中国跆协段位照片', trigger: 'change' }
        ]
      }
    };
  },
  watch: {
    userData: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.id) {
          // 起始点
          CopyData(this.userData, this.vo);
          this.formatImgListFromMemberImg(val);
        } else {
          this.clearInsideUserData();
        }
      }
    }
  },
  methods: {
    // 外部获取组件数据的方法
    getInsideUserData () {
      const _keyData = {
        'ctaBeltLevelImageUrl': this.imgListLevel,
        'ctaBeltDuanImageUrl': this.imgListDun
      };

      for (const k in _keyData) {
        const ktem = _keyData[k];

        for (let i = 0; i < ktem.length; i++) {
          const item = ktem[i];
          this.vo[k + (i + 1)] = item;
        }
      }

      return new Promise((reslove, reject) => {
        this.$refs.refTkwChiDan.validate((valid) => {
          if (valid) {
            reslove(this.vo);
          } else {
            reject({
              component: 'tkwChiDan',
              error: {
                msg: '校验失败'
              }
            });
          }
        });
      });
    },
    // 根据数据格式化图片数组
    formatImgListFromMemberImg (data) {
      const _keyData = {
        imgListLevel: [
          'ctaBeltLevelImageUrl1',
          'ctaBeltLevelImageUrl2',
          'ctaBeltLevelImageUrl3',
          'ctaBeltLevelImageUrl4',
          'ctaBeltLevelImageUrl5',
          'ctaBeltLevelImageUrl6'
        ],
        imgListDun: [
          'ctaBeltDuanImageUrl1',
          'ctaBeltDuanImageUrl2',
          'ctaBeltDuanImageUrl3',
          'ctaBeltDuanImageUrl4',
          'ctaBeltDuanImageUrl5',
          'ctaBeltDuanImageUrl6'
        ]
      };

      for (const k in _keyData) {
        const list = _keyData[k];
        const _arr = [];
        for (let i = 0; i < list.length; i++) {
          const item = list[i];
          if (data[item]) {
            _arr.push(data[item]);
            this.vo[item] = '';
          }
        }
        this[k] = _arr;
      }
    },
    onChange () {
      this.$refs.refTkwChiDan.clearValidate();
    },
    // 清空数据及验证
    clearInsideUserData () {
      this.vo = new ModTkwChiDanVO();
      this.imgListDun = [];
      this.imgListLevel = [];
      if (this.$refs.refTkwChiDan) {
        this.$refs.refTkwChiDan.resetFields();
      } else {
        this.$nextTick(() => {
          this.$refs.refTkwChiDan.resetFields();
        });
      }
    },
    // 添加图片上传控件
    addImgUploader (type) {
      this[type].push('');
    },
    // 删除图片
    delImg (type, index) {
      this[type].splice(index, 1);
    },
    // 上传成功
    photoSavePositive (fileUrl, type, index) {
      // this.$set(this.vo, 'idCardImage', fileUrl.tempUrl);
      const _data = this[type];
      this.$set(_data, index, fileUrl.tempUrl);
    },
    // 获取静态文件
    getStaticPhotoUrl (relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    }
  }
};
</script>

<style lang="scss" scoped>
  .imgt_upload {
    width: 240px;
    height: 150px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
  }
  .imgt_upload.no_pointer {
    cursor: default;
  }
  .imgt_upload:hover {
    border-color: #409EFF;
  }
  .upload_wrap  {
    position:relative;
    overflow:hidden;
  }
  .imgDelWrap {
    position: absolute;
    top: -29px;
    right: -29px;
    width: 60px;
    height: 60px;
    cursor: pointer;
    transform: rotate(45deg);
    // background-color: rgba(255, 255, 255, 0.8);
  }
  .imgDelete {
    font-size: 18px;
    position: absolute;
    top: 37px;
    left: 21px;
    transform: rotate(-45deg);
    color: rgba(255, 0, 0, 0.8);
  }

  .addImgBtn {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .show_img {
    width: 240px;
    height: 150px;
    border-radius: 4px;
    vertical-align: middle;
  }
</style>
